<template>
  <div class="app-container">
    <el-tabs v-model="tabName">
      <el-tab-pane label="无感白名单" name="fourth">
        <div class="search-container">
          <div class="search-wrap">
            <div style="display:inline-block;">
              <label class="radio-label" style="padding-left:0;">协议: </label>
              <el-input v-model="fieldName" placeholder="" style="width:240px;"/>
            </div>

            <div style="display:inline-block;">
              <label class="radio-label">端口: </label>
              <el-input v-model="fieldName" placeholder="" style="width:240px;"/>
            </div>
            <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-search">
              搜索
            </el-button>
            <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="info" icon="el-icon-refresh-right">
              重置
            </el-button>
          </div>

          <div class="btn-wrap radio-label">
            <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-circle-plus-outline"
            @click="dialogTableVisible = true">
              新增
            </el-button>
          </div>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
          <el-table-column align="center" label="编号" width="95">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="无感名单IP" width="260">
            <template slot-scope="scope">
              {{ scope.row.ip }}
            </template>
          </el-table-column>
          <el-table-column label="协议" width="150">
            <template slot-scope="scope">
              {{ scope.row.protocol }}
            </template>
          </el-table-column>
          <el-table-column label="端口" width="150">
            <template slot-scope="scope">
              {{ scope.row.port }}
            </template>
          </el-table-column>
          <el-table-column label="影响范围">
            <template slot-scope="scope">
              {{ scope.row.range }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="260" align="center">
            <template slot-scope="{row}">
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-edit"
              >
                修改
              </el-button>

              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
              >
                删除
              </el-button>
            </template>
            
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="IP白名单" name="first">IP白名单</el-tab-pane>
      <el-tab-pane label="Mac白名单" name="second">Mac白名单</el-tab-pane>
      <el-tab-pane label="域名白名单" name="third">域名白名单</el-tab-pane>
      
    </el-tabs>

    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="新增" @dragDialog="handleDrag" width="1200px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="24">
            <div class="form-title">网关配置</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="无感名单IP" prop="title">
              <el-input value="192.168.8.201"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="协议" prop="title">
              <el-input value="HTTP"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="端口" prop="title">
              <el-input value="8080"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="影响范围" prop="title">
              <el-input value="255.255.255.0,255.255.0.0,172.168.255.0"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogTableVisible = false">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'trust',
  components: { Pagination },
  directives: { elDragDialog },
  data() {
    return {
      tabName: 'fourth',
      list: null,
      fieldName: '',
      listLoading: true,
      downloadLoading: false,
      autoWidth: true,

      formList: [
        {
          ip: '192.168.2.118,192.168.2.118,192.168.2.118,192.168.2.118,192.168.2.118...',
          server: 'SSH蜜罐,FTP蜜罐,MAIL蜜罐,SMB蜜罐...',
          status: '运行中'
        },
        {
          ip: '203.45.12.85,225,234.142.118,18.10.2.88...',
          server: '天融信上网行为管理系统蜜罐,天融信防火墙蜜罐,深信服WAF系统蜜罐,奇安信防火墙系统蜜罐...',
          status: '运行中'
        },
      ],
      dialogTableVisible: false,

      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
        honeypot: '',
        server: ''
      },
      serverOptions: ['Tomcat 1.2.2','Redis 4.8.6','Apache 2.4.8','Nginx 12.8.1','MongoDB 8.7.1','Mssql 15.6.8','MariDB 8.6.4'],
      honeypotOptions: ['telnet蜜罐', 'SSH蜜罐', 'FTP蜜罐','DNS蜜罐', 'MAIL蜜罐', 'SMB蜜罐','SFTP蜜罐','天融信上网行为管理系统蜜罐','mongoDB蜜罐','openeuler蜜罐','ubuntu蜜罐','windows蜜罐'],
      hostOptions: ['28.12.125.74','47.45.109.68','12.16.84.57','176.86.94.57','175.116.180.77','112.116.110.107','182.16.10.8','2.16.105.57','182.161.122.77'],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      let data = []
      fetchList().then(response => {
        data.push({
          ip: "172.168.20.120",
          protocol: "HTTP",
          port: "80",
          range: "74.15.252.69;14.58.75.69"
        })
        data.push({
          ip: "52.18.204.25",
          protocol: "Remote Procedure Call",
          port: "135",
          range: "76.223.25.58"
        })
        data.push({
          ip: "142.68.210.20",
          protocol: "Tomcat",
          port: "8081",
          range: "18.253.15.82"
        })
        data.push({
          ip: "15.18.202.201",
          protocol: "ModSecurity",
          port: "2203",
          range: "19.48.52.10;15.53.18.74"
        })
        data.push({
          ip: "12.68.25.26",
          protocol: "Speedometer",
          port: "880",
          range: "58.12.49.67;17.46.85.24;66.114.42.36;74.145.52.69.84"
        })
        this.list = data
        this.listLoading = false
      })
    },
    handleDrag() {
      console.log("添加页面")
    }
  }
}
</script>

<style scoped>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
.search-container {
  display: flex;
  justify-content: space-between;
}
.search-wrap {
  flex: 1;
}

.form-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #F1F1F1;
  box-sizing: border-box;
}
.el-select {
  width: 100%;
}
</style>